<template>
	<view class="come_page">
		<navgatsmyVue :title="`消息`"></navgatsmyVue>
		<view class="main">
			<view class="tab">
				<view class="tab_item" :class="{active: currentTabIndex === index}" v-for="(item,index) in tab"
					:key="index" @click="switchTab(index)">
					{{item.title}}
				</view>
			</view>
			<view class="list">
				<view class="scroll_box">
					<view class="list_item" v-for="(item,index) in filteredList" :key="index"
						@click="detail(item,index)">
						<view class="left"
							:class="{'system': item.type == 1, 'activity': item.type == 2, 'trade': item.type == 3}">
						</view>
						<view class="center">
							<view class="title">{{item.title}}</view>
							<view class="description">{{item.content}}</view>
						</view>
						<view class="right">
							<view class="time">
								{{formatDate(item.date)}}
							</view>
							<view class="tip" v-if="(item.is_read==0)"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detailPopup" @click="closePopup" v-if="detailPopupShow">
			<view class="detail_box" @click.stop>
				<view class="close" @click="closeDetailPopup">

				</view>
				<view class="title">

				</view>
				<view class="content">

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import navgatsmyVue from '../../../Component/navgatsmy/navgatsmy.vue';
	import {
		getNotifications,
		isRead
	} from '../../../api/outOfTheFree';
	export default {
		data() {
			return {
				tab: [{
					id: 0,
					title: "全部消息"
				}, {
					id: 1,
					title: "系统通知"
				}, {
					id: 2,
					title: "活动提醒"
				}, {
					id: 3,
					title: "交易信息"
				}],
				detailPopupShow: false,
				currentTabIndex: 0, // 当前选中的tab索引，默认为第一个
				nocList: [],
			}
		},
		components: {
			navgatsmyVue
		},
		computed: {
			// 根据当前选中的tab过滤数据
			filteredList() {
				if (!this.nocList || !Array.isArray(this.nocList)) {
					return [];
				}
				if (this.currentTabIndex === 0) {
					// tab为0时显示全部
					return this.nocList;
				} else {
					// tab为1、2、3时，显示对应type的数据
					return this.nocList.filter(item => item && item.type == this.currentTabIndex);
				}
			}
		},
		mounted() {
			this.getNotifications()
		},
		methods: {
			//切换tab
			switchTab(index) {
				this.currentTabIndex = index
			},
			//点击详情
			detail(item, index) {
				this.isRead(item.id)
				this.getNotifications()
				this.detailPopupShow = true
			},
			//关闭详情弹窗
			closePopup() {
				this.detailPopupShow = false
			},
			//格式化日期，去掉年份
			formatDate(dateStr) {
				if (!dateStr) return '';
				// 如果是 "2025-10-31" 格式，提取月-日
				if (dateStr.includes('-')) {
					const parts = dateStr.split('-');
					if (parts.length >= 3) {
						return `${parts[1]}-${parts[2]}`;
					}
				}
				return dateStr;
			},
			//获取消息列表
			async getNotifications() {
				try {
					let res = await getNotifications()
					if (res && res.data && res.data.data && Array.isArray(res.data.data)) {
						this.nocList = res.data.data;
					} else {
						this.nocList = [];
					}
					console.log(this.nocList);
				} catch (error) {
					console.error('获取数据失败:', error)
					this.nocList = [];
				}
			},
			//标记已读
			async isRead(id) {
				let data = {
					id: id
				}
				try {
					let res = await isRead(data)
					console.log(res);

				} catch (error) {
					console.error('获取数据失败:', error)
				}
			},
			//关闭详情弹窗
			closeDetailPopup() {
				this.detailPopupShow = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	.come_page {
		width: 100vw;
		height: 100vh;
		position: relative;

		.main {
			width: 100%;
			/* #ifdef APP-PLUS */
			height: calc(100% - 170rpx);
			/* #endif */
			/* #ifdef H5 */
			height: calc(100% - 95rpx);
			/* #endif */
			background-image: url("https://img.jingkakeji.com/img/static/new_come/bg.png");
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.tab {
				width: 95%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.tab_item {
					width: 160rpx;
					height: 100%;
					font-size: 26rpx;
					color: white;
					text-align: center;
					line-height: 80rpx;
					background-image: url("https://img.jingkakeji.com/img/static/new_come/tab.png");
					background-size: 100% 100%;
				}

				.active {
					background-image: url("https://img.jingkakeji.com/img/static/new_come/tab_active.png");
				}
			}

			.list {
				width: 95%;
				height: 1350rpx;
				margin-top: 30rpx;
				background-image: url("https://img.jingkakeji.com/img/static/new_come/list_bg.png");
				background-size: 100% 100%;
				overflow-y: scroll;

				.scroll_box {
					width: 100%;
					height: auto;
					display: flex;
					flex-direction: column;
					align-items: center;

					.list_item {
						width: 95%;
						height: 150rpx;
						margin: 20rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							width: 130rpx;
							height: 130rpx;
							background-size: 100% 100%;

							&.system {
								background-image: url("https://img.jingkakeji.com/img/static/new_come/system.png");
							}

							&.activity {
								background-image: url("https://img.jingkakeji.com/img/static/new_come/activity.png");
							}

							&.trade {
								background-image: url("https://img.jingkakeji.com/img/static/new_come/trade.png");
							}
						}

						.center {
							width: 380rpx;
							height: 100rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.title {
								font-size: 30rpx;
								color: #31296A;
							}

							.description {
								width: 100%;
								font-size: 24rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #8C87B6;
							}
						}

						.right {
							width: 120rpx;
							height: 80rpx;
							display: flex;
							flex-direction: column;
							align-items: end;
							justify-content: space-between;

							.time {
								font-size: 24rpx;
								color: #8C87B6;
							}

							.tip {
								width: 12rpx;
								height: 12rpx;
								background-color: red;
								border-radius: 50%;
							}
						}
					}
				}
			}
		}

		.detailPopup {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;

			.detail_box {
				width: 650rpx;
				height: 830rpx;
				background-image: url("https://img.jingkakeji.com/img/static/new_come/detail_box.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				position: relative;

				.close {
					position: absolute;
					right: 0;
					top: -50rpx;
					width: 40rpx;
					height: 40rpx;
					background-image: url("https://img.jingkakeji.com/img/static/new_index/close.png");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}
		}
	}
</style>